<template>
  <div class="admin-red-main">
    <van-popup v-model="show" @close="hanleClose">
      <div v-if="redStatus === 0" class="wrapper">
        <div class="close" @click="hanleClose">
          <van-icon name="cross" />
        </div>
        <div class="header">
          <img :src="decoration"> <span>发红包</span> <img class="rotate" :src="decoration">
        </div>
        <div class="field-box">
          <div class="input-box">
            <div class="title"><span>*</span>总金额</div>
            <div class="input"><input type="number" v-model="money" @change="check_price" placeholder="0.00"></div>
            <div class="unit">元</div>
          </div>
          <div class="desc">当前为拼手气红包，红包金额上限200元</div>
        </div>
        <div class="field-box">
          <div class="input-box">
            <div class="title"><span>*</span>红包个数</div>
            <div class="input"><input type="number" v-model="nums" placeholder="填写个数"></div>
            <div class="unit">个</div>
          </div>
          <div class="desc">当前直播间人数100个，单个红包数量上限100个</div>
        </div>
        <div class="field-box">
          <div class="input-box">
            <div class="title"><span>*</span>倒计时</div>
            <div class="input"><input type="number" v-model="countDown" placeholder="填写时间"></div>
            <div class="unit">秒</div>
          </div>
          <div class="desc">默认0秒立即发放，最长时间300秒</div>
        </div>
        <div class="submit-btn" @click="handleSendRed">
          <button>塞进红包</button>
        </div>
        <div class="tips-box">
          <div class="title">提示:</div>
          <p>1、管理员无法抢红包</p>
          <p>2、红包手续费1%</p>
          <p>3、未领取的红包，将于24小时内退回至平台账户</p>
        </div>
      </div>
      <div v-if="redStatus === 1" class="wrapper">
        <div class="close" @click="hanleClose">
          <van-icon name="cross" />
        </div>
        <div class="paper-bg">
          <img :src="redData.userIcon || paper" class="bgimg">
          <!-- <img class="avatar"> -->
        </div>
        <div class="red-info">
          <div class="seller-name spacing-12">{{redData.userName}}</div>
          <div class="spacing-73">直播间红包</div>
          <div class="spacing-24">红包余额: {{redData.money}}</div>
          <div class="spacing-24">剩余金额: {{redData.surplusMoney}}</div>
          <div class="spacing-24">红包人数: {{redData.nums}}</div>
          <div>剩余可抢人数: {{redData.surplusNums}}</div>
        </div>
        <div class="another-one" @click="handleOneRed">
          再发一个
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import decoration from '../../../assets/record/img_decoration.png'
import paper from '../../../assets/record/img_paper_bg.png'
import { fetchSendRed } from '../../../api/live'
export default {
  props: {
    redData: {
      type: Object,
      default: {}
    },
    redStatus: {
      type: Number,
      default: 0
    },
    roomid: {
      type: Number | String
    }
  },
  data() {
    return {
      show: true,
      // hasredInfo: false,
      decoration,
      paper,
      money: '',
      nums: '',
      countDown: ''
    }
  },
  mounted() {
    this.setActionDidFinishFunction(this.actionDidFinish)
  },
  methods: {
    hanleClose() {
      this.$emit('onClose')
    },
    handleOneRed() {
      // this.hasredInfo = true
      this.$emit('changeStatus')
    },
    handleSendRed() {
      // fetchSendRed({ money: this.money, nums: this.nums, countDown: this.countDown, roomId: this.roomid }).then(res => {
      //   if (res.data.code === 0) {
      //     try {
      //       let param = {
      //         goodsId: res.data.data.orderId,
      //         goodsNum: 1,
      //         goodsType: '',
      //         hasNewUserGoods: 0
      //       }
      //       this.sendMessage({ id: 6, target: 'buyNow', data: param })
      //     } catch (error) {
      //       console.log(error)
      //     }
      //   }
      // })
    },
    actionDidFinish(args, error, result) {
      // console.log(result, 'login')
      if (args === 6) {
        if (typeof result === 'string' && result.constructor === String) {
          result = JSON.parse(result)
        }
        if (result !== undefined) {
          
        }
      }
    },
    check_price() {
      let price = '' + this.money
      price = price
        .replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
        .replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
        .replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // 只能输入两个小数
      if (price.indexOf('.') < 0 && price != '') {
        // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        price = parseFloat(price)
      }
      this.money = price
    }
  }
}
</script>
<style>
.van-popup{
  background: transparent;
}
</style>
<style lang="scss" scoped>
 .admin-red-main {
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 5;
   .wrapper{
     width: px2em(600px);
     height: px2em(950px);
     background: #FA4141;
     border-radius: px2em(16px);
     position: relative;
     padding: 0 px2em(40px);
     .close{
       color: #fff;
       font-size: px2em(32px);
       position: absolute;
       right: px2em(24px);
       top: px2em(24px);
     }
     .header{
       text-align: center;
       padding: px2em(40px) 0;
       img{
         width: px2em(56px);
         height: px2em(20px);
         vertical-align: middle;
       }
       span{
        font-size: px2em(40px);
        color: #FEE4B2;
        padding: 0 px2em(24px);
        vertical-align: middle;
       }
       .rotate{
         transform:  rotate(180deg);
       }
     }
     .field-box {
       margin-bottom: px2em(40px);
       .input-box {
         background: #fff;
         height: px2em(94px);
         border-radius: px2em(8px);
         padding: 0 px2em(20px);
         display: flex;
         align-items: center;
         .title{
           font-size: px2em(30px);
           color: #333333;
           position: relative;
           padding-left: px2em(30px);
           span{
             color: #db1919;
             font-size: px2em(50px);
             position: absolute;
             top:10%;
             left: 0;
           }
         }
         .input {
           flex:1;
           padding:0 px2em(12px);
           input {
             font-size: px2em(30px);
             width: 100%;
             text-align: right;
           }
         }
         .unit{
           color: #333333;
           font-size: px2em(30px);
         }
       }
       .desc{
         margin-top: px2em(12px);
         color: #FEE4B2;
         font-size: px2em(24px);
       }
     }
     .submit-btn{
       padding: 0 px2em(50px);
       margin: px2em(24px) 0;
       button {
         width: 100%;
         height: px2em(88px);
         line-height: px2em(88px);
         background: #FFE492;
         color: #F83535;
         font-size: px2em(40px);
         font-weight: bold;
         border-radius: px2em(12px);
       }
     }
     .tips-box{
       color: #fff;
       font-size: px2em(24px);
     }
     .paper-bg{
       width: 100%;
       margin: px2em(127px) px2em(-40px) px2em(20px) px2em(-40px);
       text-align: center;
       display: inline-block;
       .bgimg {
         width: px2em(124px);
         height: px2em(124px);
         border-radius: 50%;
         margin-top: px2em(-80px);
         margin-left: px2em(80px);
       }
      //  .avatar {
      //    width: px2em(124px);
      //    height: px2em(124px);
      //    border-radius: 50%;
      //    margin-top: px2em(-80px);
      //    margin-left: px2em(80px);
      //  }
     }
     .red-info{
       text-align: center;
       color: #FEE4B2;
       font-size: px2em(28px);
       .seller-name{
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
       .spacing-12{
         margin-bottom: px2em(12px);
       }
       .spacing-24 {
         margin-bottom: px2em(24px);
       }
       .spacing-73 {
         margin-bottom: px2em(73px);
       }
     }
     .another-one{
       position: absolute;
       bottom: px2em(52px);
       color: #fff;
       text-align: center;
       left: 0;
       right: 0;
       font-size: px2em(30px);
     }
   }
 }
</style>
